<template>
  <div>
    <!-- 页面查询部分 -->
    <BaseCard>
      <!-- 全局表单组件 -->
      <UiForm v-bind="formConfig" v-model:formData="queryForm" @handleFormItemChange="handleFormItemChange"
        ref="uiFormRef">
        <template #custom-slot>
          <el-button type="primary" @click="query">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </template>
      </UiForm>
    </BaseCard>
  </div>
</template>

<script setup lang="js">
import { ref } from "vue"
import { formConfig } from "./config/form.config"
import { initFormData } from "@/utils/init"

// 搜索表单dom
const uiFormRef = ref(null)

// 根据formConfig 生成查询表单基础数据
const queryForm = ref(initFormData(formConfig.formItems))

// 表单每一选项change事件
const handleFormItemChange = (value, item) => {
  console.log(`表单当前选项对应的值->value`, value)
  console.log(`表单当前选项->item`, item)
}

// 搜索
const query = () => {
  console.log("搜素方法执行了--->", queryForm.value)
}

// 重置
const reset = () => {
  queryForm.value = initFormData(formConfig.formItems)
  console.log("重置方法执行了--->", queryForm.value)
}
</script>
<style scoped lang="scss"></style>